<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
      <el-form-item label="标题">
        <el-input v-model="query.keywords"
                  placeholder="昵称、用户ID"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="选择月份">
        <el-date-picker
          v-model="query.month"
          type="month"
          size="small"
          style="width: 180px"
          format="yyyy-MM"
          value-format="yyyyMM"
          placeholder="选择开始日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   native-type="submit">筛选</el-button>
<!--        <el-button native-type="reset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <div class="action-body">
      <el-button type="primary" size="small" @click="rewardSetting">奖励配置</el-button>
      <el-button type="primary" size="small" @click="reward" :disabled="has_reward">奖励</el-button>
      <el-button type="primary" size="small" @click="refresh">刷新排序</el-button>
    </div>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column type="index" width="55"></el-table-column>
      <el-table-column label="用户ID"
                       prop="user_id"></el-table-column>
      <el-table-column label="昵称"
                       prop="name"></el-table-column>
      <el-table-column label="邀请有效好友数"
                       prop="num"></el-table-column>
      <el-table-column label="时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.month.slice(0,4)}}-{{row.month.slice(4,6)}}
        </template>
      </el-table-column>
      <el-table-column label="类型"
                       prop="status">
        <template slot-scope="{ row }">
          {{['系统','人工'][row.ranking_type]}}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       prop="status">
        <template slot-scope="{ row }">
          {{['未奖励','已奖励'][row.status]}}
        </template>
      </el-table-column>
      <el-table-column label="奖励金额"
                       prop="status">
        <template slot-scope="{ row }">
          {{row.reward_money | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <div class="operation_body">
            <el-button type="text"
                       size="small" @click="editRow(row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
<!--    <el-pagination layout="total, prev, pager, next"-->
<!--                   background-->
<!--                   @current-change="fetch"-->
<!--                   :current-page.sync="currentPage"-->
<!--                   :page-size="limit"-->
<!--                   style="display: flex;justify-content: center;"-->
<!--                   :total="total">-->
<!--    </el-pagination>-->
    <edit-dialog ref="editDialog"></edit-dialog>
    <view-dialog ref="viewDialog"></view-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import editDialog from './components/edit-dialog'
import { award } from './api'
import viewDialog from './components/view-dialog'

export default {
  name: 'invite',
  data () {
    return {
      query: {
        keywords: undefined,
        limit: 20,
        page: 1,
        month: '',
        type: 'invite'
      }
    }
  },
  mixins: [commonCurd],
  components: {
    editDialog, viewDialog
  },
  async asyncData ({ store, route }) {
    return store.dispatch('leaderboard/invite/fetchList', { page: 1, limit: 20, type: 'invite' })
  },
  computed: {
    ...mapGetters('leaderboard/invite', ['list', 'has_reward'])
  },
  methods: {
    ...mapActions('leaderboard/invite', ['fetchList']),
    async editRow (row) {
      await this.$refs.editDialog.open(row)
      this.fetch()
    },
    onSubmit () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.data = this.$options.data
      this.fetch(1)
    },
    async reward () {
      await this.$confirm('提示：将奖励前20名用户，每月仅可操作一次', '奖励')
      await award({ type: this.query.type })
      this.$message.success('操作成功')
      this.fetch(1)
    },
    async refresh () {
      await this.fetch(1)
      this.$message.success('刷新成功')
    },
    async rewardSetting () {
      await this.$refs.viewDialog.open()
    }
  }
}
</script>

<style lang="scss" scoped>
.fit-size {
  height: 259px;
}
.action-body {
  margin-left: 40px;
  margin-bottom: 18px;
}
</style>
